<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="商户名称">
              <el-input v-model="form.name" placeholder="请输入服务名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商户类型">
              <el-select v-model="form.category_id" placeholder="请选择上架状态" clearable filterable>
                <el-option
                  v-for="item in shopCate"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号">
              <el-input v-model="form.phone" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地区">
              <el-cascader v-model="address" :options="twoOptions" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核状态">
              <el-select v-model="form.update_status" placeholder="请选择审核状态" clearable>
                <el-option
                  v-for="item in ServiceList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7" :offset="1">
            <el-button type="primary" @click="searchList()">查询</el-button>
            <!-- <el-button type="primary" @click="handleExport">导出</el-button> -->
            <el-button class="leadingOut" type="primary" @click="toRoutes('shopAdd')">创建商户</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="80px" />
        <el-table-column prop="name" label="商户名称" />
        <el-table-column prop="shop_logo" label="营业执照">
          <template v-if="scope.row.enp_img" slot-scope="scope">
            <img :src="imgUrl+scope.row.enp_img" alt />
          </template>
        </el-table-column>
        <el-table-column prop="category_name" label="商户类型" />
        <el-table-column prop="username" label="联系人" />
        <el-table-column prop="phone" label="手机号">
          <template slot-scope="scope">
            <span>{{scope.row.phone | phonereg}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="province_name" label="地区">
          <template slot-scope="scope">
            {{ scope.row.province_name + scope.row.city_name }}
            <br />
          </template>
        </el-table-column>
        <el-table-column prop="submit_time" label="提交时间" />
        <el-table-column prop="examine_time" label="审核时间" />
        <el-table-column prop="update_status_name" label="审核状态">
          <template slot-scope="scope">
            {{ scope.row.update_status_name }}
            <br />
            <el-button
              v-if="scope.row.update_status==2"
              type="text"
              size="mini"
              @click="changeIsshow(scope.row.check_msg)"
            >驳回原因</el-button>
            <br />
            <!-- <span v-show="isShow"> {{scope.row.check_msg }}</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="is_on" label="上架状态">
          <template slot-scope="scope">{{ scope.row.update_status==3? scope.row.is_on : '--' }}</template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="toRoutes('shopInfo',scope.row.id)">查看</el-button>
            <el-button
              v-if="scope.row.update_status==1"
              type="text"
              size="mini"
              @click="checkmsg(scope.row.id)"
            >审核</el-button>
            <el-button type="text" size="mini" @click="toRoutes('shopEdit',scope.row.id)">编辑</el-button>
            <!-- <el-button
              v-if="scope.row.update_status==3 && scope.row.is_on=='已下架'"
              type="text"
              size="mini"
              @click="toUp(scope.row.id,scope.row.status)"
            >上架</el-button>-->
            <el-button
              v-if="scope.row.update_status==3 && scope.row.is_on=='已上架'"
              type="text"
              size="mini"
              @click="toDown(scope.row.id,scope.row.status)"
            >下架</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="form.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <el-dialog
        v-if="dialogFormVisible"
        title
        :visible.sync="dialogFormVisible"
        width="30%"
        @close="clear"
      >
        <el-form ref="form1" :model="form1" label-width="100px" :rules="rules">
          <el-form-item label="审核" prop="check_status" style="magin-left:20px">
            <el-radio-group v-model="form1.check_status">
              <el-radio label="1">通过</el-radio>
              <el-radio label="2">不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form1.check_status==1" prop="icon">
            <el-checkbox-group v-model="form1.icon">
              <el-checkbox label="1">商户标星</el-checkbox>
              <el-checkbox label="2">商户保证</el-checkbox>
              <el-checkbox label="3">品牌认证</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item v-if="form1.check_status==2" label="驳回原因" prop="remark">
            <el-input v-model="form1.remark" type="textarea" :rows="3" />
          </el-form-item>
        </el-form>
        <div slot="footer" center class="dialog-footer">
          <el-button type="primary" @click="checkStatus('form1')">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        v-if="dialogForm"
        title="下架店铺"
        :visible.sync="dialogForm"
        width="25%"
        destroy-on-close
        @close="clears"
      >
        <el-form ref="form2" :model="form2" :rules="rules2">
          <el-form-item>
            <h3 class="color">是否下架该店铺？</h3>
            <span class="color">下架店铺将会以短信通知商户</span>
          </el-form-item>
          <el-form-item prop="reason">
            <el-input v-model="form2.reason" type="textarea" :rows="5" placeholder="请输入下架原因..." />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogForm = false">取 消</el-button>
          <el-button type="primary" @click="toDownBtn('form2')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  shopList,
  getPro,
  getCate,
  changeStatus,
  cardExport,
  toChangeStatus,
} from "@/api/shopMange";
import commonFn from "@/utils/common";

export default {
  name: "ShopCheckList",
  data() {
    return {
      imgUrl: "http://mmkappnew.oss-cn-beijing.aliyuncs.com/",
      isShow: false,
      userName: "",
      // loading层
      tableLoading: false,
      // 提交form
      address: [],
      form: {
        page: 1,
        pageSize: 10,
        name: "",
        category_id: "",
        phone: "",
        province: "",
        city: "",
        update_status: "",
      },
      form1: {
        check_status: "1",
        icon: [],
        remark: "",
        shop_id: "",
        auditor: "",
      },
      form2: {
        status: 0,
        reason: "",
      },
      rules: {
        check_status: [
          {
            required: true,
            message: "请选择审核状态",
            trigger: "change",
          },
        ],
        // icon:[
        //   { required: true, message: "请选择审核状态", trigger: "change" }
        // ],
        remark: [
          {
            required: true,
            message: "请填写驳回原因",
            trigger: "blur",
          },
          {
            min: 1,
            max: 100,
            message: "最多100个字符",
            trigger: "blur",
          },
        ],
      },
      rules2: {
        reason: [
          { required: true, message: "请填写驳回原因", trigger: "blur" },
        ],
      },
      dialogForm: false,
      dialogFormVisible: false,
      // 审核状态下拉列表
      ServiceList: [
        {
          name: "待提交",
          value: "0",
        },
        {
          name: "待审核",
          value: "1",
        },
        {
          name: "审核未通过",
          value: "2",
        },
        {
          name: "审核通过",
          value: "3",
        },
      ],
      shopCate: [], // 门店分类
      twoOptions: [], // 省市
      // 主页列表显示
      tableData: [],
      // 分页
      page_sizes: [10, 30, 50, 100],
      page_totals: 10,
    };
  },
  watch: {
    address: function (val) {
      if (val) {
        this.form.province = val[0];
        this.form.city = val[1];
      }
    },
  },

  created() {
    this.getArea();
    this.getShopCate();
    this.getUser();
  },
  mounted() {
    this.getList();
    this.form1.auditor = this.$store.state.user.name;
  },
  methods: {
    clear() {
      this.form1 = {
        check_status: "",
        icon: [],
        remark: "",
        shop_id: "",
        auditor: "",
      };
      this.form1.auditor = this.$store.state.user.name;
    },
    clears() {
      this.form2 = {
        id: null,
        reason: "",
        status: 0,
      };
    },
    // 省市区
    getArea() {
      getPro().then((res) => {
        const newArr = [];
        // console.log(res)
        res.data.forEach((item1, index) => {
          newArr.push({
            value: item1.value,
            label: item1.label,
          });
          if (item1.children != null) {
            newArr[index]["children"] = [];
            item1.children.forEach((item2) => {
              newArr[index]["children"].push({
                value: item2.value,
                label: item2.label,
              });
            });
          }
        });
        // this.options = res.data;
        this.twoOptions = newArr;
      });
    },
    // 获取列表
    getList(e) {
      this.tableLoading = true;
      shopList(e)
        .then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.page_totals = res.data.page_totals;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning",
            });
          }
          this.tableLoading = false;
        })
        .catch((res) => {
          this.errorStatus(res.message);
          this.tableLoading = false;
        });
    },
    // 获取门店分类
    getShopCate() {
      getCate().then((res) => {
        const newArr = [];
        res.data.forEach((item1, index) => {
          newArr.push({
            value: item1.value,
            label: item1.label,
          });
        });
        this.shopCate = newArr;
      });
    },
    // 审核按钮
    checkmsg(id) {
      this.dialogFormVisible = true;
      this.form1.shop_id = id;
    },
    // 审核
    checkStatus(f) {
      this.$refs[f].validate((valid) => {
        if (valid) {
          changeStatus(this.form1).then((res) => {
            if (res.data.code == 200) {
              this.dialogFormVisible = false;
              this.clear();
              this.getList(this.form);
              this.$message({
                message: "操作成功",
                type: "success",
              });
            } else {
              this.dialogFormVisible = false;
              this.$message({
                message: res.data.msg,
                type: "warning",
              });
            }
          });
        } else {
          this.$message({
            message: "有必项没填，不能提交咯",
            type: "warning",
          });
          return false;
        }
      });
    },
    // 搜索
    searchList() {
      this.form.page = 1;
      this.getList(this.form);
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status,
      });
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    // 警告状态弹窗
    warningStatus(txt) {
      this.eleMsg(txt, "warning");
    },
    // 路由跳转
    toRoutes(e, userId) {
      const route = { name: e, query: { id: userId } };
      this.$router.push(route);
    },
    // 导出
    handleExport() {
      cardExport({
        name: this.form.name,
        category_id: this.form.category_id,
        province: this.form.province,
        city: this.form.city,
        update_status: this.form.update_status,
      })
        .then((res) => {
          commonFn.downFile("商户审核列表", res);
        })
        .catch((err) => {
          this.errorStatus(err);
        });
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
    // 取消弹窗
    cancel() {
      this.dialogFormVisible = false;
      this.$message("已取消");
    },
    // confirm框
    eleConfirm(e) {
      this.$confirm(e.desc, e.title, {
        confirmButtonText: e.confirmBtnTxt,
        cancelButtonText: e.cancelBtnTxt,
        type: "warning",
      })
        .then(() => {
          e.fn();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: e.catchInfo,
          });
        });
    },
    // 上架
    // toUp(id) {
    //   this.$confirm('是否上架该店铺？', '上架店铺', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       toChangeStatus({ id: id, status: 1 }).then(res => {
    //         if (res.data.code == 200) {
    //           this.getList(this.form)
    //           this.$message({
    //             type: 'success',
    //             message: '更新成功!'
    //           })
    //         } else {
    //           this.$message({
    //             type: 'info',
    //             message: res.data.msg
    //           })
    //         }
    //       })
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消'
    //       })
    //     })
    // },
    // 下架
    toDown(id) {
      this.dialogForm = true;
      this.form2.id = id;
    },
    toDownBtn(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          toChangeStatus(this.form2).then((res) => {
            if (res.data.code == 200) {
              this.clears();
              this.getList(this.form);
              this.$message({
                type: "success",
                message: "更新成功!",
              });
            } else {
              this.clears();
              this.$message({
                type: "info",
                message: res.data.msg,
              });
            }
            this.dialogForm = false;
          });
        } else {
          this.$message({
            message: "有必项没填，不能提交咯",
            type: "warning",
          });
          return false;
        }
      });
    },
    // 获取用户名
    getUser() {
      const userName = this.$store.state.user.name;
      this.userName = userName;
    },
    changeIsshow(msg) {
      this.$confirm(msg, "驳回原因", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // this.$message({
          //   // type: 'success',
          //   // message: '删除成功!'
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });

      //  this.isShow = !this.isShow
    },
  },
};
</script>
<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
/* 表单样式修改 */
/* .el-range-editor--medium.el-input__inner {
  width: 236px;
} */
.switchBtn {
  color: #ff4949;
}
.el-radio-group {
  margin-left: 30px;
}
img {
  display: block;
  width: 80px;
  height: 80px;
}
.color {
  display: block;
  width: 80%;
  margin: auto;
  text-align: center;
}
</style>